<docs>
  ## 上传图片 并且可以调用摄像头
</docs>
<template>
<div>
  <div class="upload_wrap" v-if="!flag">
    <div class="upload_add"></div>
    <p class="upload_tit">{{label}}</p>
    <!-- <p class="tishi">（请上传小于1M的jgp的图片）</p> -->
		<!-- <form enctype="multipart/form-data" ref="upload_form"> -->
    <input class="file_btn" type="file" id="uploadFile" @change="upload()" accept="image/*" ref="uploadFile">
		<!-- </form> -->
  </div>
  <div class="img_wrap" v-if="flag">
    <img :src="imgSrc" alt=""  class="upload_img">
    <p class="cx_file" @click="cxFile">重新上传</p>
  </div>
</div>
</template>
<script>

export default {
  props: {
    label: String,
  },
  name: "co-upload",
  data() {
    return {
			flag:false,
      imgSrc:'',
      tpid: ''
		};
  },
  methods: {
    // 图片上传
    upload() {
      this.$loading = true;
      var formData = new FormData();
      formData.append("file", this.$refs.uploadFile.files[0]);
			this.$http.post('/dafwgl/wjscxz/wjsc',formData).then((res)=>{
        const flag = parseInt(res.returnData.executeResult, 10);
        if (flag === 1) {
          this.tpid = res.returnData.tpid;
				  this.tphx(res.returnData.tpid)
        } else {
          this.$alert({
            type: 'warning',
            message: res.returnData.message
          });
        }
			}).finally(() => {
        this.$loading = false;
      });
    },
    // 上传图片回显功能
		tphx(id) {
			this.flag = true;
			this.imgSrc = conf.urlPrefix+'/dafwgl/wjscxz/tpxs?tpid='+id
    },
    // 重新上传
    cxFile() {
      this.flag = false;
      this.imgSrc='';
      this.tpid = '';
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.img_wrap{
  width: 500px;
  min-height: 400px;
  padding: 40px 0;
  margin: auto;
  text-align: center;
  position: relative;
  .upload_img{
    max-width: 500px;
    max-height: 300px;
  }
  .cx_file{
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    transform: translateX(-50%);
    font-size: $font-size-base;
    padding: $radius-base $radius-base2;
    background: $color-base;
    color: #fff;
    border-radius: 10px;
  }
}

.upload_wrap {
  width: 300px;
  height: 200px;
	margin: auto;
	position: relative;

  .upload_add {
    width: 132px;
    height: 132px;
    margin: 10px auto 0;
    background: url("~common/images/add.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .upload_tit {
    font-size: $font-size-base;
    line-height: 0.42rem;
    width: 100%;
    text-align: center;
    margin-top: $margin-base;
  }
  .tishi {
    white-space: nowrap;
    margin-left: -100px;
    padding: 20px 0;
    color: red;
  }
  .file_btn {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0;
    opacity: 0;
  }
}
</style>
